<template>
  <el-dialog
    :title="pages.id?'编辑分类':'新增分类'"
    :visible="isShowDislog"
    :close-on-click-modal="false"
    @close="isCancel"
  >
    <el-form ref="form" :model="pages" :rules="rules" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="pages.title" />
      </el-form-item>
      <el-form-item label="内容">
        <!-- <el-input v-model="pages.content" type="textarea" :rows="3" /> -->
        <vue-editor v-model="content" />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="danger" size="small" @click="isCancel">取消</el-button>
      <el-button type="primary" size="small" @click="isOK">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { VueEditor } from 'vue2-editor'
import { getPageApi, editPagesApi, addPagesApi } from '@/api/page'
export default {
  components: { VueEditor },

  props: {
    isShowDislog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      content: '',
      pages: {},
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 确定
    async isOK() {
      await this.$refs.form.validate()
      this.pages.content = this.content
      if (this.pages.id) {
        // 编辑
        await editPagesApi(this.pages)
        this.$message.success('编辑成功')
      } else {
        // 新增
        await addPagesApi(this.pages)
        this.$message.success('新增成功')
      }
      this.$parent.queryPages()
      this.$parent.getPagesCoun()

      this.$emit('update:isShowDislog', false)
    },
    // 数据回显
    async getPage(id) {
      const res = await getPageApi(id)
      // console.log(res)
      this.pages = res
      this.content = res.content
    },

    // 取消
    isCancel() {
      this.$refs.form.resetFields()
      this.pages = {}
      this.$emit('update:isShowDislog', false)
      this.content = ''
    }
  }
}

</script>

<style>

</style>
